<template>
  <div class="liveplayer">
    <div v-if="status === 0">
      <aliplayer
      :x5_type="true"
      :playsinline="true"
      :source="source"
      :isLive="true"
      :useH5Prism="true"
      :useFlashPrism="false"
      ref="player">
      </aliplayer>
      <div class="introduce">
          <div class="top">
           <span class="textPadding">直播信息</span>
          </div>
          <div class="title">
           <span class="textPadding">标题： {{ title }}</span>
          </div>
          <div class="content">
            <span class="textPadding">简介：{{ detail }}</span>
          </div>
      </div>
    </div>
    <div v-else-if="status === 1">
      <div class="codePage">
        <div class="validate">
          <div class="bottomImg"></div>
          <div class="codeTitle">{{ codeTitle }}</div>
          <!-- <div class="logoImg"></div> -->
        </div>
        <div class="confirm">
          <input v-model="code" class="codeInp" placeholder="请输入直播验证码">
          <br>
          <button @click="codeConfirm">确认</button>
        </div>
      </div>
    </div>

    <div v-else-if="status === 2" class="l_message">{{ message }}</div>
  </div>
</template>

<script>
import Aliplayer from 'vue-aliplayer'

export default {
  components: {
    Aliplayer
  },
  data () {
    return {
      baseUrl: '',
      code: '',
      codeTitle: '',
      status: 2,
      uid: '',
      ip: '',
      title: 'title',
      source: 'http://live.meetsoon.net/MHOnLive/MXHk720FpMWZ0Zhl9wHSPAh7.m3u8',
      detail: 'detail',
      message: ''
    }
  },
  // props: ['source']
  methods: {
    codeConfirm () {
      let req = {
        uid: this.uid,
        code: this.code
      }
      let url = this.baseUrl + '/mhlivemgr/live/stream'
      this.$http.post(url, req).then(res => {
        if (res.data.ret === 0) {
          this.status = 0
          this.title = res.data.data.liveInfo.liveTitle
          this.detail = res.data.data.liveInfo.liveDetail
          this.source = res.data.data.streamUrl
        } else if (res.data.ret === 20006) {
          this.$lMessage({
            message: '验证码错误',
            time: 1200
          })
        }
      }).catch(() => {})
    },
    queryCode () {
      let req = {uid: this.uid}
      let url = this.baseUrl + '/mhlivemgr/live/stream'
      this.$http.post(url, req).then(res => {
        if (res.data.ret === 0) {
          this.status = 0
          this.title = res.data.data.liveInfo.liveTitle
          this.detail = res.data.data.liveInfo.liveDetail
          this.source = res.data.data.streamUrl
        } else if (res.data.ret === 20007) {
          this.status = 2
          this.message = '直播未开启'
        } else if (res.data.ret === 20008) {
          this.status = 2
          this.status = '直播资源未找到'
        } else if (res.data.ret === 20006) {
          this.status = 1
          this.codeTitle = res.data.data.liveInfo.liveTitle
        }
      }).catch(() => {})
    }
  },
  created () {
    let uidip = this.$route.params.uidip.split('&')
    this.uid = uidip[0]
    this.ip = uidip[1]
    // this.baseUrl = 'http://' + this.ip
    // 判断是否传了ip
    if (this.ip) {
      this.baseUrl = 'http://' + this.ip
    } else {
      this.baseUrl = 'http://mxcloud.meetsoon.net'
    }
    this.queryCode()
  }
}
</script>

<style scoped>
.liveplayer {
  height: 100%;
  position: relative;
}

.introduce .title {
  /* margin-top:1.6rem; */
  height: 1.6rem;
  line-height: 1.6rem;
  width: 100%;
  font-size: 0.7rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.introduce .top{
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 0.75rem;
  width: 100%;
  background-color: rgba(196,196,196,0.5);
}
.introduce .content{
  width: 100%;
  font-size: 0.7rem;
  color: #4A4A4A;
  }

.introduce .textPadding {
  padding-left: 0.3rem;
  width: 100%;
  display: inline-block;
}

.validate {
  width: 100%;
  height: 15rem;
  background: linear-gradient(0deg, #04BEFE 0%, #4481EB 100%);
  position: relative;
}
.validate .bottomImg {
  width: 100%;
  height: 4rem;
  position: absolute;
  bottom: -5px;
  background: url(~@/assets/bg.jpg) center no-repeat;
  background-size: cover;
}
.validate .codeTitle {
  width: 16rem;
  position: absolute;
  right: 50%;
  bottom: 8rem;
  margin-right: -8rem;
  color: white;
  font-size: 1.1rem;  
  text-align: center;
}
/* .validate .logoImg {
  width: 148px;
  height: 115px;
  background: url('./img/validate_logo.png');
  background-size: cover;
  position: absolute;
  bottom: 250px;
  right: 50%;
  margin-right: -74px;
  transform: translate(50%);
} */
.confirm {
  padding-top: 0.5rem;
  width: 100%;
  text-align: center;
}
.confirm .codeInp {
  border: 1px solid #1CA8F7;
  border-radius: 3.3rem;
  width: 8rem;
  height: 1.8rem;
  font-size: 0.7rem;
  outline: none;
  text-align: center;
  margin-bottom: 1rem;
}
.confirm button {
  background: linear-gradient(0deg, #04BEFE 0%, #4481EB 100%);
  width: 4rem;
  height: 1.8rem;
  border-radius: 3.7rem;
  border: 1px solid white;
  color: white;
  font-size: 0.65rem;
  /* font-weight: 300; */
}

.l_message {
  text-align: center;
  font-size: 1rem;
  position: fixed;
  padding: 8px;
  color: #fff;
  background-color: rgba(0,0,0,0.6);
  border-radius: 5px;
  top: 40%;
  left: 50%;
  transform: translate(-50%);
}
</style>